<template>
    <div class="teamplate-nissin">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="weather">
                        <div class="yun iconfont icon-tianqi_bingbao"></div>
                        <div class="message">
                            <div class="title">今日天气 | 多云转晴</div>
                            <div class="degrees">30℃</div>
                        </div>
                    </div>
                </div>
                <div class="nissin-wrap clearfix">
                    <div class="list col-md-4 col-xs-4 col-lg-4">
                        <div class="box">
                            <ul class="left-first">
                                <li>
                                    <i class="iconfont icon-hedui"></i><input type="button" value="操作对账" :class="account?'on':''" @click='onPop' :disabled="account?true:false" data-target="#md_nissin">
                                    <!-- <i class="adorn"></i> -->
                                </li>
                                <li>
                                    <i class="iconfont icon-rili"></i><input type="button" value="日清" :class="nissin?'on':''" :disabled="nissin?true:false" @click="onNissin">
                                    <!-- <i class="adorn"></i> -->
                                </li>
                                <li>
                                    <i class="iconfont icon-qian4"></i><input type="button" value="辅助结算" :class="settlement?'on':''" :disabled="settlement?true:false" @click="onSettlement">
                                    <i class="adorn" v-show="re"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="list col-md-4 col-xs-4 col-lg-4" v-show="re">
                        <div class="box payment-method">
                            <ul class="">
                                <li class="on">
                                    <i class="iconfont icon-qian3"></i>
                                    <div class="text">
                                        <span class="s1">现金</span>：
                                        <span>{{receivables.cash}}</span>
                                    </div>
                                </li>
                                <li>
                                    <i class="iconfont icon-yinlian"></i>
                                    <div class="text">
                                        <span class="s1">银联</span>：
                                        <span>{{receivables.unionpay}}</span>
                                    </div>
                                </li>
                                <li>
                                    <i class="iconfont icon-icon-"></i>
                                    <div class="text">
                                        <span class="s1">微信</span>：
                                        <span>{{receivables.weixin}}</span>
                                    </div>
                                </li>
                                <li>
                                    <i class="iconfont icon-umidd17"></i>
                                    <div class="text">
                                        <span class="s1">支付宝</span>：
                                        <span>{{receivables.alipay}}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="list col-md-4 col-xs-4 col-lg-4" v-show="re">
                        <div class="box count-money">
                            <ul id="j_miane">
                                <li><span>100元</span> <input type="number" id="num1" min="0" @input="oninput" v-model="moneyNum.Denomination.onehundredYuan"></li>
                                <li><span>50元</span> <input type="number" id="num2" min="0" @input="oninput" v-model="moneyNum.Denomination.fiftyYuan"></li>
                                <li><span>20元</span> <input type="number" id="num3" min="0" @input="oninput" v-model="moneyNum.Denomination.twentyYuan"></li>
                                <li><span>10元</span> <input type="number" id="num4" min="0" @input="oninput" v-model="moneyNum.Denomination.tenYuan"></li>
                                <li><span>5元</span> <input type="number" id="num5" min="0" @input="oninput" v-model="moneyNum.Denomination.fiveYuan"></li>
                                <li><span>1元</span> <input type="number" id="num6" min="0" @input="oninput" v-model="moneyNum.Denomination.oneYuan"></li>
                                <li><span>5角</span> <input type="number" id="num7" min="0" @input="oninput" v-model="moneyNum.Denomination.fiveJiao"></li>
                                <li><span>1角</span> <input type="number" id="num8" min="0" @input="oninput" v-model="moneyNum.Denomination.oneJiao"></li>
                            </ul>
                            <p>总计：
                                <span>{{moneyNum.total}}元</span>
                            </p>
                            <!-- <p>挂账：<span> 0.3元</span></p> -->
                            <div class="text-center"><input type="button" @click="onSubmit" class="btn" value="确认" ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="md_nissin" data-backdrop="static">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                          <span aria-hidden="true" @click="">×</span>
                          <span class="sr-only" >关闭</span>
                      </button>
                      <h4 class="modal-title">零售收款</h4>
                  </div>
                  <div class="modal-body">
                      <div class="wrap">
                            <div class="account" v-show="accountTxt">
                                <p><span class="s1">时实收款金额：</span><span class="green">{{mysqlJine}}</span></p>
                                <p><span class="s1">待同步金额：</span><span class="green">{{sqlServerJine}}</span></p>
                                <img v-show="accountloading" :src="cfg.assets+'/images/Loading.gif'" alt="">
                            </div>
                            <div class="nissin loading tc">
                                <img v-show="loading" :src="cfg.assets+'/images/Loading.gif'" alt="">
                                <p v-show="!settlement" style="height:70px;line-height: 27px">日清成功</p>
                            </div>
                            <p class="tc">
                                <input type="button" v-show="!account" value='对账' @click="onAccount" class="btn">
                                <input type="button" v-show="!nissin" value='日清' @click="onNissin" class="btn">
                                <input type="button" v-show="!settlement" value='辅助结算' @click="onSettlement" class="btn">
                            </p>
                      </div>
                  </div>
              </div>
          </div>
        </div>
    </div>
    </div>
</template>
<script>
    import bus from "../api/eventBus";
    export default {
        data() {
            return {
                liIdx: "",
                text: "现金",
                fdbs: "",
                account: false,
                accountTxt: true,
                accountloading: false,
                nissin: true,
                nissinloading: false,
                settlement: true,
                settlementTxt: false,
                re: false,
                loading: false,
                uniqueIdentify: "",
                receivables: {},
                moneyNum: {
                    total: 0, //总计金额
                    Denomination: {
                        //面额
                        onehundredYuan: 0, //100
                        fiftyYuan: 0, //50
                        twentyYuan: 0, //20
                        tenYuan: 0, //10
                        fiveYuan: 0, //5
                        oneYuan: 0, //1
                        fiveJiao: 0, //0.5
                        oneJiao: 0 //0.1
                    },
                    nums: {
                        //数量
                        onehundredYuan: 0, //100
                        fiftyYuan: 0, //50
                        twentyYuan: 0, //20
                        tenYuan: 0, //10
                        fiveYuan: 0, //5
                        oneYuan: 0, //1
                        fiveJiao: 0, //0.5
                        oneJiao: 0 //0.1
                    }
                },
                mysqlJine: '',
                sqlServerJine: ''
            };
        },
        computed: {},
        methods: {
            onPop(e) {
                let me = this;
                if (!me.account) {
                    $('#md_nissin').modal('show');
                    me.service.duizhang(me);
                }
            },
            onAccount(e) { //操作对账
                let me = this;
                me.accountloading = true;
                me.service.checkoutRiQing(me);
            },
            onNissin(e) { //日清
                let me = this;
                me.loading = true;
                me.accountTxt = false;
                let user = JSON.parse(sessionStorage.getItem("user"));
                let res = {
                    jzid: "***********",
                    fdbs: me.fdbs,
                    sktid: localStorage.getItem("sktId"),
                    wether: "晴",
                    zhy: "新零售日清",
                    shkyid: user.shkyid,
                    shky: user.shky,
                    is_all: "是",
                    iamzd: "否"
                }
                console.log(me.account);
                if (me.account) {
                    me.service.executeRiQing(me, res);
                }
            },
            onSettlement(e) { //辅助结算
                let me = this;
                if (me.nissin) {
                    me.service.selectRiQingJieSuan(me);
                }
            },
            onSubmit(e) {
                let me = this;
                let datas = Object.assign({}, me.moneyNum.Denomination, {
                    uniqueIdentify: me.uniqueIdentify
                });
                console.log(datas, me.uniqueIdentify);
                me.service.insertXianJinMX(me);
            },
            oninput(e) {
                let me = this;
                let nums = 0;
                me.moneyNum.nums.onehundredYuan = parseFloat(me.moneyNum.Denomination.onehundredYuan) * 100;
                me.moneyNum.nums.fiftyYuan = parseFloat(me.moneyNum.Denomination.fiftyYuan) * 50;
                me.moneyNum.nums.twentyYuan = parseFloat(me.moneyNum.Denomination.twentyYuan) * 20;
                me.moneyNum.nums.tenYuan = parseFloat(me.moneyNum.Denomination.tenYuan) * 10;
                me.moneyNum.nums.fiveYuan = parseFloat(me.moneyNum.Denomination.fiveYuan) * 5;
                me.moneyNum.nums.oneYuan = parseFloat(me.moneyNum.Denomination.oneYuan) * 1;
                me.moneyNum.nums.fiveJiao = parseFloat(me.moneyNum.Denomination.fiveJiao) * 0.5;
                me.moneyNum.nums.oneJiao = parseFloat(me.moneyNum.Denomination.oneJiao) * 0.1;
                me.onHeji();
            },
            onHeji(e) {
                let me = this;
                let heji = 0;
                for (let i in me.moneyNum.nums) {
                    heji += parseFloat(me.moneyNum.nums[i]);
                }
                me.moneyNum.total = heji.toFixed(2);
            }
        },
        mounted() {
            let me = this;
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                })
                return;
            }
            console.log(me.account, 123123);
            nissinHeight();
            //分店标识
            me.fdbs = localStorage.getItem('fdbs')


            $("input").focus(event => {
                event.currentTarget.select();
            });
        }
    };
</script>